import React from 'react'
// ===================================================================== Temp
import Table from '#cpt/temp/Table'
import Controls from '#cpt/temp/Controls'
import Confirm from '#cpt/temp/Confirm'
// ===================================================================== Declare
const { $fn, $Lazy } = window
// ===================================================================== Lazy
const Box 		= $Lazy.load(()=>import('#tp/box/box'))
const AddModal 	= $Lazy.state(()=>import('./cpt/add-modal'))
// ===================================================================== component
class Index extends React.Component{
	state = {
		data:[],
		pag: {},
		selectedKeys:[],
	}
	
	model = {}
	
	componentDidMount(){
		this.query = {kind_id:this.props.kind_id}
		this.fetch()
	}
	
	// paging
	fetch = () => $fn.fetch.call(this,'kd-kind-rel-other/index', { paging:'get'})
	
	// 表单
	cols = [
		{ title: '项目代码', 	dataIndex: 'kind_code', 		width:150 },
		{ title: '项目名称', 	dataIndex: 'kind_name', 		width:250 },
		{ title: '项目简称', 	dataIndex: 'short_name', 		width:150 },
		{ title: '项目英文', 	dataIndex: 'name_en', 			width:250 },
		{ title: '项目分类', 	dataIndex: 'category_name', 	width:100 },
	]
	// 操作按钮
	controls = () => {
		const { disabled } = this.props
		return [
			Controls.click.call(this,'添加', ()=> this.modelRef.open(this.props.kind_id), { disabled } ),
			Confirm.call(this,'删除', 'kd-kind-rel-other/delete', { isKeys: true, ghost:true })
		]
	}
	
	render(){
		return (
			<>
				<Box title='其他项目' controls={this.controls()} className='mt5' contentClassName='pt10'>
					{/* 表格 */}
					{ Table.call(this, { wrapStyle: this.props.tableStyle, disabled:this.props.disabled }) }
				</Box>
				{/* 弹窗 */}
				<AddModal onRef={ref => this.modelRef = ref} onRefresh={this.fetch} />
			</>
		)
	}
}

export default Index